<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4015335" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe752;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe752;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe754;</span>
                <div class="name">搜索类目</div>
                <div class="code-name">&amp;#xe754;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe693;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe693;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70d;</span>
                <div class="name">vip - fill</div>
                <div class="code-name">&amp;#xe70d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67f;</span>
                <div class="name">vip_icon</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe711;</span>
                <div class="name">会员卡</div>
                <div class="code-name">&amp;#xe711;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">会员</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a6;</span>
                <div class="name">vip</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74c;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe74c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68f;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe68f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b8;</span>
                <div class="name">205设置</div>
                <div class="code-name">&amp;#xe8b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b7;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe8b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe871;</span>
                <div class="name"> 消息</div>
                <div class="code-name">&amp;#xe871;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec35;</span>
                <div class="name">消息通知</div>
                <div class="code-name">&amp;#xec35;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8bd;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe8bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9b5;</span>
                <div class="name">消息,信息</div>
                <div class="code-name">&amp;#xe9b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">充值</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">充值</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">充值2</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">充值</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">充值</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">全部订单</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">3.1订单</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe737;</span>
                <div class="name">订单</div>
                <div class="code-name">&amp;#xe737;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe897;</span>
                <div class="name"> 订单集合</div>
                <div class="code-name">&amp;#xe897;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ae;</span>
                <div class="name">订单</div>
                <div class="code-name">&amp;#xe8ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73d;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xe73d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe741;</span>
                <div class="name">客服</div>
                <div class="code-name">&amp;#xe741;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">客服</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">客服</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ab;</span>
                <div class="name">38-客服</div>
                <div class="code-name">&amp;#xe8ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">客服</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">删除2</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a0;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe6a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c1;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe8c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe696;</span>
                <div class="name">修改</div>
                <div class="code-name">&amp;#xe696;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">修改</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8cf;</span>
                <div class="name">修改</div>
                <div class="code-name">&amp;#xe8cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">修改</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">修改</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">加</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">新增</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
                <div class="name">新增</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">新增</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">新增</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73a;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe73a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe680;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8a6;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe8a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cd;</span>
                <div class="name">KHCFDC_更多</div>
                <div class="code-name">&amp;#xe6cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">锁定</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">解锁</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d4;</span>
                <div class="name">242锁定</div>
                <div class="code-name">&amp;#xe8d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d5;</span>
                <div class="name">243解锁</div>
                <div class="code-name">&amp;#xe8d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeac2;</span>
                <div class="name">解锁</div>
                <div class="code-name">&amp;#xeac2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeac3;</span>
                <div class="name">锁定</div>
                <div class="code-name">&amp;#xeac3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">like_fill</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">like</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e1;</span>
                <div class="name">appreciate_light</div>
                <div class="code-name">&amp;#xe7e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e2;</span>
                <div class="name">appreciate_fill_light</div>
                <div class="code-name">&amp;#xe7e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe86f;</span>
                <div class="name">喜欢2</div>
                <div class="code-name">&amp;#xe86f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe870;</span>
                <div class="name">喜欢</div>
                <div class="code-name">&amp;#xe870;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe814;</span>
                <div class="name">oppose_fill_light</div>
                <div class="code-name">&amp;#xe814;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe815;</span>
                <div class="name">oppose_light</div>
                <div class="code-name">&amp;#xe815;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ad;</span>
                <div class="name">点赞</div>
                <div class="code-name">&amp;#xe8ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b9;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xe8b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c4;</span>
                <div class="name">点赞</div>
                <div class="code-name">&amp;#xe8c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c6;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xe8c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe830;</span>
                <div class="name">money-finance-seller-fill</div>
                <div class="code-name">&amp;#xe830;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe831;</span>
                <div class="name">money-finance-buyer-fill</div>
                <div class="code-name">&amp;#xe831;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe832;</span>
                <div class="name">money-rmb</div>
                <div class="code-name">&amp;#xe832;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe833;</span>
                <div class="name">money-rmb-fill</div>
                <div class="code-name">&amp;#xe833;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x68;</span>
                <div class="name">主页</div>
                <div class="code-name">&amp;#x68;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">主页</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe83a;</span>
                <div class="name">主页</div>
                <div class="code-name">&amp;#xe83a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef7c;</span>
                <div class="name">star-fill</div>
                <div class="code-name">&amp;#xef7c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef7e;</span>
                <div class="name">star-line</div>
                <div class="code-name">&amp;#xef7e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef80;</span>
                <div class="name">thumb-down-fill</div>
                <div class="code-name">&amp;#xef80;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef81;</span>
                <div class="name">thumb-down-line</div>
                <div class="code-name">&amp;#xef81;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef82;</span>
                <div class="name">thumb-up-fill</div>
                <div class="code-name">&amp;#xef82;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef83;</span>
                <div class="name">thumb-up-line</div>
                <div class="code-name">&amp;#xef83;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeda6;</span>
                <div class="name">bank-fill</div>
                <div class="code-name">&amp;#xeda6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeda7;</span>
                <div class="name">bank-line</div>
                <div class="code-name">&amp;#xeda7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedaa;</span>
                <div class="name">hospital-line</div>
                <div class="code-name">&amp;#xedaa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedac;</span>
                <div class="name">hospital-fill</div>
                <div class="code-name">&amp;#xedac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedb0;</span>
                <div class="name">bar-chart-2-fill</div>
                <div class="code-name">&amp;#xedb0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedb1;</span>
                <div class="name">bar-chart-2-line</div>
                <div class="code-name">&amp;#xedb1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedb2;</span>
                <div class="name">bar-chart-box-fill</div>
                <div class="code-name">&amp;#xedb2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedb3;</span>
                <div class="name">bar-chart-box-line</div>
                <div class="code-name">&amp;#xedb3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedb5;</span>
                <div class="name">bar-chart-grouped-fill</div>
                <div class="code-name">&amp;#xedb5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedb7;</span>
                <div class="name">bar-chart-grouped-line</div>
                <div class="code-name">&amp;#xedb7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedbb;</span>
                <div class="name">cloud-line</div>
                <div class="code-name">&amp;#xedbb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedbf;</span>
                <div class="name">customer-service-2-fill</div>
                <div class="code-name">&amp;#xedbf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedc0;</span>
                <div class="name">customer-service-2-line</div>
                <div class="code-name">&amp;#xedc0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedc7;</span>
                <div class="name">mail-fill</div>
                <div class="code-name">&amp;#xedc7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedc8;</span>
                <div class="name">mail-line</div>
                <div class="code-name">&amp;#xedc8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedce;</span>
                <div class="name">printer-fill</div>
                <div class="code-name">&amp;#xedce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedcf;</span>
                <div class="name">printer-line</div>
                <div class="code-name">&amp;#xedcf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeddb;</span>
                <div class="name">chat-2-fill</div>
                <div class="code-name">&amp;#xeddb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeddc;</span>
                <div class="name">chat-2-line</div>
                <div class="code-name">&amp;#xeddc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeddd;</span>
                <div class="name">chat-3-fill</div>
                <div class="code-name">&amp;#xeddd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedde;</span>
                <div class="name">chat-3-line</div>
                <div class="code-name">&amp;#xedde;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeddf;</span>
                <div class="name">chat-4-fill</div>
                <div class="code-name">&amp;#xeddf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xede0;</span>
                <div class="name">chat-4-line</div>
                <div class="code-name">&amp;#xede0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedf8;</span>
                <div class="name">edit-2-fill</div>
                <div class="code-name">&amp;#xedf8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedf9;</span>
                <div class="name">edit-2-line</div>
                <div class="code-name">&amp;#xedf9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedfa;</span>
                <div class="name">edit-fill</div>
                <div class="code-name">&amp;#xedfa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee01;</span>
                <div class="name">edit-line</div>
                <div class="code-name">&amp;#xee01;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee20;</span>
                <div class="name">git-repository-fill</div>
                <div class="code-name">&amp;#xee20;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee21;</span>
                <div class="name">git-repository-line</div>
                <div class="code-name">&amp;#xee21;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee27;</span>
                <div class="name">battery-2-charge-line</div>
                <div class="code-name">&amp;#xee27;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee26;</span>
                <div class="name">battery-2-charge-fill</div>
                <div class="code-name">&amp;#xee26;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee2f;</span>
                <div class="name">phone-fill</div>
                <div class="code-name">&amp;#xee2f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee31;</span>
                <div class="name">phone-line</div>
                <div class="code-name">&amp;#xee31;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee37;</span>
                <div class="name">book-2-fill</div>
                <div class="code-name">&amp;#xee37;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee38;</span>
                <div class="name">book-2-line</div>
                <div class="code-name">&amp;#xee38;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee39;</span>
                <div class="name">book-open-line</div>
                <div class="code-name">&amp;#xee39;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee3a;</span>
                <div class="name">book-open-fill</div>
                <div class="code-name">&amp;#xee3a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee49;</span>
                <div class="name">file-music-fill</div>
                <div class="code-name">&amp;#xee49;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee4a;</span>
                <div class="name">file-music-line</div>
                <div class="code-name">&amp;#xee4a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee5f;</span>
                <div class="name">folder-music-fill</div>
                <div class="code-name">&amp;#xee5f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee60;</span>
                <div class="name">folder-music-line</div>
                <div class="code-name">&amp;#xee60;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee61;</span>
                <div class="name">folder-open-line</div>
                <div class="code-name">&amp;#xee61;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee62;</span>
                <div class="name">folder-open-fill</div>
                <div class="code-name">&amp;#xee62;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee8e;</span>
                <div class="name">gift-2-line</div>
                <div class="code-name">&amp;#xee8e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee8f;</span>
                <div class="name">gift-fill</div>
                <div class="code-name">&amp;#xee8f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee90;</span>
                <div class="name">gift-line</div>
                <div class="code-name">&amp;#xee90;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee91;</span>
                <div class="name">hand-heart-line</div>
                <div class="code-name">&amp;#xee91;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee92;</span>
                <div class="name">hand-heart-fill</div>
                <div class="code-name">&amp;#xee92;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee9c;</span>
                <div class="name">shopping-cart-2-fill</div>
                <div class="code-name">&amp;#xee9c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee9d;</span>
                <div class="name">shopping-cart-fill</div>
                <div class="code-name">&amp;#xee9d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee9e;</span>
                <div class="name">shopping-cart-2-line</div>
                <div class="code-name">&amp;#xee9e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeea0;</span>
                <div class="name">shopping-cart-line</div>
                <div class="code-name">&amp;#xeea0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeea2;</span>
                <div class="name">vip-fill</div>
                <div class="code-name">&amp;#xeea2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeea3;</span>
                <div class="name">vip-line</div>
                <div class="code-name">&amp;#xeea3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeeb7;</span>
                <div class="name">bus-2-fill</div>
                <div class="code-name">&amp;#xeeb7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeeb8;</span>
                <div class="name">bus-fill</div>
                <div class="code-name">&amp;#xeeb8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeeb9;</span>
                <div class="name">bus-2-line</div>
                <div class="code-name">&amp;#xeeb9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeebc;</span>
                <div class="name">bike-line</div>
                <div class="code-name">&amp;#xeebc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeebd;</span>
                <div class="name">bus-line</div>
                <div class="code-name">&amp;#xeebd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeebe;</span>
                <div class="name">bike-fill</div>
                <div class="code-name">&amp;#xeebe;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeebf;</span>
                <div class="name">e-bike-2-fill</div>
                <div class="code-name">&amp;#xeebf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeec0;</span>
                <div class="name">e-bike-2-line</div>
                <div class="code-name">&amp;#xeec0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeec1;</span>
                <div class="name">flight-takeoff-line</div>
                <div class="code-name">&amp;#xeec1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeec2;</span>
                <div class="name">flight-takeoff-fill</div>
                <div class="code-name">&amp;#xeec2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeeca;</span>
                <div class="name">motorbike-line</div>
                <div class="code-name">&amp;#xeeca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeecb;</span>
                <div class="name">motorbike-fill</div>
                <div class="code-name">&amp;#xeecb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeecc;</span>
                <div class="name">parking-box-fill</div>
                <div class="code-name">&amp;#xeecc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeecd;</span>
                <div class="name">parking-box-line</div>
                <div class="code-name">&amp;#xeecd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeece;</span>
                <div class="name">parking-fill</div>
                <div class="code-name">&amp;#xeece;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeecf;</span>
                <div class="name">parking-line</div>
                <div class="code-name">&amp;#xeecf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeed0;</span>
                <div class="name">plane-fill</div>
                <div class="code-name">&amp;#xeed0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeed1;</span>
                <div class="name">plane-line</div>
                <div class="code-name">&amp;#xeed1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeed2;</span>
                <div class="name">restaurant-fill</div>
                <div class="code-name">&amp;#xeed2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeed3;</span>
                <div class="name">restaurant-2-fill</div>
                <div class="code-name">&amp;#xeed3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeed4;</span>
                <div class="name">restaurant-2-line</div>
                <div class="code-name">&amp;#xeed4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeed5;</span>
                <div class="name">restaurant-line</div>
                <div class="code-name">&amp;#xeed5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeed6;</span>
                <div class="name">riding-fill</div>
                <div class="code-name">&amp;#xeed6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeed7;</span>
                <div class="name">riding-line</div>
                <div class="code-name">&amp;#xeed7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeed8;</span>
                <div class="name">run-line</div>
                <div class="code-name">&amp;#xeed8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeed9;</span>
                <div class="name">run-fill</div>
                <div class="code-name">&amp;#xeed9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeeda;</span>
                <div class="name">sailboat-fill</div>
                <div class="code-name">&amp;#xeeda;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeedb;</span>
                <div class="name">sailboat-line</div>
                <div class="code-name">&amp;#xeedb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeedc;</span>
                <div class="name">ship-2-fill</div>
                <div class="code-name">&amp;#xeedc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeedd;</span>
                <div class="name">ship-2-line</div>
                <div class="code-name">&amp;#xeedd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeedf;</span>
                <div class="name">ship-line</div>
                <div class="code-name">&amp;#xeedf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeee0;</span>
                <div class="name">ship-fill</div>
                <div class="code-name">&amp;#xeee0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeee1;</span>
                <div class="name">walk-line</div>
                <div class="code-name">&amp;#xeee1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeee2;</span>
                <div class="name">walk-fill</div>
                <div class="code-name">&amp;#xeee2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeee3;</span>
                <div class="name">camera-2-line</div>
                <div class="code-name">&amp;#xeee3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeee4;</span>
                <div class="name">camera-fill</div>
                <div class="code-name">&amp;#xeee4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef19;</span>
                <div class="name">football-line</div>
                <div class="code-name">&amp;#xef19;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef1a;</span>
                <div class="name">football-fill</div>
                <div class="code-name">&amp;#xef1a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef1b;</span>
                <div class="name">hearts-fill</div>
                <div class="code-name">&amp;#xef1b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef1c;</span>
                <div class="name">hearts-line</div>
                <div class="code-name">&amp;#xef1c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef22;</span>
                <div class="name">t-shirt-2-line</div>
                <div class="code-name">&amp;#xef22;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef23;</span>
                <div class="name">t-shirt-2-fill</div>
                <div class="code-name">&amp;#xef23;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef25;</span>
                <div class="name">umbrella-fill</div>
                <div class="code-name">&amp;#xef25;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef26;</span>
                <div class="name">umbrella-line</div>
                <div class="code-name">&amp;#xef26;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef50;</span>
                <div class="name">heart-2-line</div>
                <div class="code-name">&amp;#xef50;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef51;</span>
                <div class="name">heart-fill</div>
                <div class="code-name">&amp;#xef51;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef57;</span>
                <div class="name">lock-line</div>
                <div class="code-name">&amp;#xef57;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef58;</span>
                <div class="name">lock-fill</div>
                <div class="code-name">&amp;#xef58;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef59;</span>
                <div class="name">lock-unlock-fill</div>
                <div class="code-name">&amp;#xef59;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef5a;</span>
                <div class="name">lock-unlock-line</div>
                <div class="code-name">&amp;#xef5a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef6e;</span>
                <div class="name">settings-3-fill</div>
                <div class="code-name">&amp;#xef6e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef6f;</span>
                <div class="name">settings-3-line</div>
                <div class="code-name">&amp;#xef6f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef70;</span>
                <div class="name">settings-4-fill</div>
                <div class="code-name">&amp;#xef70;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef71;</span>
                <div class="name">settings-5-fill</div>
                <div class="code-name">&amp;#xef71;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xefa1;</span>
                <div class="name">cloudy-2-fill</div>
                <div class="code-name">&amp;#xefa1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xefa2;</span>
                <div class="name">cloudy-2-line</div>
                <div class="code-name">&amp;#xefa2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xefa7;</span>
                <div class="name">moon-clear-fill</div>
                <div class="code-name">&amp;#xefa7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xefa8;</span>
                <div class="name">moon-clear-line</div>
                <div class="code-name">&amp;#xefa8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xefab;</span>
                <div class="name">sun-fill</div>
                <div class="code-name">&amp;#xefab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xefac;</span>
                <div class="name">sun-line</div>
                <div class="code-name">&amp;#xefac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xefad;</span>
                <div class="name">temp-cold-fill</div>
                <div class="code-name">&amp;#xefad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xefae;</span>
                <div class="name">temp-cold-line</div>
                <div class="code-name">&amp;#xefae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xefaf;</span>
                <div class="name">temp-hot-line</div>
                <div class="code-name">&amp;#xefaf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef97;</span>
                <div class="name">user-3-fill</div>
                <div class="code-name">&amp;#xef97;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef98;</span>
                <div class="name">user-3-line</div>
                <div class="code-name">&amp;#xef98;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef99;</span>
                <div class="name">user-2-fill</div>
                <div class="code-name">&amp;#xef99;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef9a;</span>
                <div class="name">user-2-line</div>
                <div class="code-name">&amp;#xef9a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef9b;</span>
                <div class="name">user-5-fill</div>
                <div class="code-name">&amp;#xef9b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef9c;</span>
                <div class="name">user-5-line</div>
                <div class="code-name">&amp;#xef9c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef9d;</span>
                <div class="name">user-fill</div>
                <div class="code-name">&amp;#xef9d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef9e;</span>
                <div class="name">user-line</div>
                <div class="code-name">&amp;#xef9e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeda3;</span>
                <div class="name">building-2-fill</div>
                <div class="code-name">&amp;#xeda3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeda4;</span>
                <div class="name">building-3-fill</div>
                <div class="code-name">&amp;#xeda4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeda5;</span>
                <div class="name">building-4-fill</div>
                <div class="code-name">&amp;#xeda5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedab;</span>
                <div class="name">store-fill</div>
                <div class="code-name">&amp;#xedab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedae;</span>
                <div class="name">archive-fill</div>
                <div class="code-name">&amp;#xedae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedad;</span>
                <div class="name">archive-drawer-fill</div>
                <div class="code-name">&amp;#xedad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedb4;</span>
                <div class="name">briefcase-2-fill</div>
                <div class="code-name">&amp;#xedb4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedb6;</span>
                <div class="name">briefcase-fill</div>
                <div class="code-name">&amp;#xedb6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedc9;</span>
                <div class="name">mail-open-fill</div>
                <div class="code-name">&amp;#xedc9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedd1;</span>
                <div class="name">projector-fill</div>
                <div class="code-name">&amp;#xedd1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeded;</span>
                <div class="name">brush-3-fill</div>
                <div class="code-name">&amp;#xeded;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedf4;</span>
                <div class="name">crop-fill</div>
                <div class="code-name">&amp;#xedf4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedf7;</span>
                <div class="name">drop-fill</div>
                <div class="code-name">&amp;#xedf7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedfb;</span>
                <div class="name">focus-fill</div>
                <div class="code-name">&amp;#xedfb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedfc;</span>
                <div class="name">grid-fill</div>
                <div class="code-name">&amp;#xedfc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedfd;</span>
                <div class="name">layout-2-fill</div>
                <div class="code-name">&amp;#xedfd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedfe;</span>
                <div class="name">layout-3-fill</div>
                <div class="code-name">&amp;#xedfe;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedff;</span>
                <div class="name">layout-4-fill</div>
                <div class="code-name">&amp;#xedff;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee00;</span>
                <div class="name">layout-6-fill</div>
                <div class="code-name">&amp;#xee00;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee02;</span>
                <div class="name">layout-bottom-fill</div>
                <div class="code-name">&amp;#xee02;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee03;</span>
                <div class="name">layout-grid-fill</div>
                <div class="code-name">&amp;#xee03;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee04;</span>
                <div class="name">layout-left-2-fill</div>
                <div class="code-name">&amp;#xee04;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee05;</span>
                <div class="name">layout-left-fill</div>
                <div class="code-name">&amp;#xee05;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee07;</span>
                <div class="name">layout-right-fill</div>
                <div class="code-name">&amp;#xee07;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee09;</span>
                <div class="name">layout-top-2-fill</div>
                <div class="code-name">&amp;#xee09;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee2b;</span>
                <div class="name">gradienter-fill</div>
                <div class="code-name">&amp;#xee2b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee2c;</span>
                <div class="name">cpu-line</div>
                <div class="code-name">&amp;#xee2c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee2d;</span>
                <div class="name">hard-drive-2-fill</div>
                <div class="code-name">&amp;#xee2d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee2e;</span>
                <div class="name">mouse-fill</div>
                <div class="code-name">&amp;#xee2e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee30;</span>
                <div class="name">server-fill</div>
                <div class="code-name">&amp;#xee30;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee48;</span>
                <div class="name">file-mark-fill</div>
                <div class="code-name">&amp;#xee48;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee66;</span>
                <div class="name">folders-fill</div>
                <div class="code-name">&amp;#xee66;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee6a;</span>
                <div class="name">passport-fill</div>
                <div class="code-name">&amp;#xee6a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee85;</span>
                <div class="name">copper-coin-fill</div>
                <div class="code-name">&amp;#xee85;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee8c;</span>
                <div class="name">gift-2-fill</div>
                <div class="code-name">&amp;#xee8c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee9f;</span>
                <div class="name">ticket-fill</div>
                <div class="code-name">&amp;#xee9f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeea4;</span>
                <div class="name">wallet-fill</div>
                <div class="code-name">&amp;#xeea4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeeb2;</span>
                <div class="name">windows-fill</div>
                <div class="code-name">&amp;#xeeb2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeeba;</span>
                <div class="name">compass-2-fill</div>
                <div class="code-name">&amp;#xeeba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeebb;</span>
                <div class="name">compass-4-fill</div>
                <div class="code-name">&amp;#xeebb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeede;</span>
                <div class="name">aspect-ratio-fill</div>
                <div class="code-name">&amp;#xeede;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef24;</span>
                <div class="name">voice-recognition-fill</div>
                <div class="code-name">&amp;#xef24;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef27;</span>
                <div class="name">apps-2-fill</div>
                <div class="code-name">&amp;#xef27;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef28;</span>
                <div class="name">apps-fill</div>
                <div class="code-name">&amp;#xef28;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef3b;</span>
                <div class="name">checkbox-multiple-blank-fill</div>
                <div class="code-name">&amp;#xef3b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef3d;</span>
                <div class="name">dashboard-fill</div>
                <div class="code-name">&amp;#xef3d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef63;</span>
                <div class="name">notification-badge-fill</div>
                <div class="code-name">&amp;#xef63;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef65;</span>
                <div class="name">qr-scan-fill</div>
                <div class="code-name">&amp;#xef65;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef79;</span>
                <div class="name">side-bar-fill</div>
                <div class="code-name">&amp;#xef79;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef96;</span>
                <div class="name">spy-fill</div>
                <div class="code-name">&amp;#xef96;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1692155074845') format('woff2'),
       url('iconfont.woff?t=1692155074845') format('woff'),
       url('iconfont.ttf?t=1692155074845') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo4"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo1"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo5"></span>
            <div class="name">
              搜索类目
            </div>
            <div class="code-name">.icon-sousuo5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo2"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo3"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vip1"></span>
            <div class="name">
              vip - fill
            </div>
            <div class="code-name">.icon-vip1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vip2"></span>
            <div class="name">
              vip_icon
            </div>
            <div class="code-name">.icon-vip2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vip3"></span>
            <div class="name">
              会员卡
            </div>
            <div class="code-name">.icon-vip3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vip4"></span>
            <div class="name">
              会员
            </div>
            <div class="code-name">.icon-vip4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vip5"></span>
            <div class="name">
              vip
            </div>
            <div class="code-name">.icon-vip5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shezhi5"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-shezhi5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shezhi1"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-shezhi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shezhi2"></span>
            <div class="name">
              205设置
            </div>
            <div class="code-name">.icon-shezhi2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shezhi3"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-shezhi3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shezhi4"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-shezhi4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxi4"></span>
            <div class="name">
               消息
            </div>
            <div class="code-name">.icon-xiaoxi4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxi1"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-xiaoxi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxi2"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-xiaoxi2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxi5"></span>
            <div class="name">
              消息通知
            </div>
            <div class="code-name">.icon-xiaoxi5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxi3"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-xiaoxi3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxi6"></span>
            <div class="name">
              消息,信息
            </div>
            <div class="code-name">.icon-xiaoxi6
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chongzhi5"></span>
            <div class="name">
              充值
            </div>
            <div class="code-name">.icon-chongzhi5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chongzhi1"></span>
            <div class="name">
              充值
            </div>
            <div class="code-name">.icon-chongzhi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chongzhi2"></span>
            <div class="name">
              充值2
            </div>
            <div class="code-name">.icon-chongzhi2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chongzhi3"></span>
            <div class="name">
              充值
            </div>
            <div class="code-name">.icon-chongzhi3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chongzhi4"></span>
            <div class="name">
              充值
            </div>
            <div class="code-name">.icon-chongzhi4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingdan5"></span>
            <div class="name">
              全部订单
            </div>
            <div class="code-name">.icon-dingdan5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingdan4"></span>
            <div class="name">
              3.1订单
            </div>
            <div class="code-name">.icon-dingdan4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingdan2"></span>
            <div class="name">
              订单
            </div>
            <div class="code-name">.icon-dingdan2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingdan3"></span>
            <div class="name">
               订单集合
            </div>
            <div class="code-name">.icon-dingdan3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingdan1"></span>
            <div class="name">
              订单
            </div>
            <div class="code-name">.icon-dingdan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gouwuche5"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icon-gouwuche5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gouwuche1"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icon-gouwuche1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gouwuche2"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icon-gouwuche2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gouwuche3"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icon-gouwuche3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gouwuche4"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icon-gouwuche4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kefu5"></span>
            <div class="name">
              客服
            </div>
            <div class="code-name">.icon-kefu5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kefu1"></span>
            <div class="name">
              客服
            </div>
            <div class="code-name">.icon-kefu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kefu2"></span>
            <div class="name">
              客服
            </div>
            <div class="code-name">.icon-kefu2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kefu4"></span>
            <div class="name">
              38-客服
            </div>
            <div class="code-name">.icon-kefu4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kefu3"></span>
            <div class="name">
              客服
            </div>
            <div class="code-name">.icon-kefu3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu5"></span>
            <div class="name">
              删除2
            </div>
            <div class="code-name">.icon-shanchu5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu3"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-shanchu3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu1"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-shanchu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu2"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-shanchu2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu4"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-shanchu4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiugai4"></span>
            <div class="name">
              修改
            </div>
            <div class="code-name">.icon-xiugai4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiugai5"></span>
            <div class="name">
              修改
            </div>
            <div class="code-name">.icon-xiugai5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiugai1"></span>
            <div class="name">
              修改
            </div>
            <div class="code-name">.icon-xiugai1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiugai2"></span>
            <div class="name">
              修改
            </div>
            <div class="code-name">.icon-xiugai2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiugai3"></span>
            <div class="name">
              修改
            </div>
            <div class="code-name">.icon-xiugai3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xinzeng1"></span>
            <div class="name">
              加
            </div>
            <div class="code-name">.icon-xinzeng1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xinzeng3"></span>
            <div class="name">
              新增
            </div>
            <div class="code-name">.icon-xinzeng3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xinzeng4"></span>
            <div class="name">
              新增
            </div>
            <div class="code-name">.icon-xinzeng4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xinzeng5"></span>
            <div class="name">
              新增
            </div>
            <div class="code-name">.icon-xinzeng5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xinzeng2"></span>
            <div class="name">
              新增
            </div>
            <div class="code-name">.icon-xinzeng2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gengduo1"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.icon-gengduo1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gengduo7"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.icon-gengduo7
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gengduo2"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.icon-gengduo2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gengduo3"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.icon-gengduo3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gengduo4"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.icon-gengduo4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gengduo5"></span>
            <div class="name">
              KHCFDC_更多
            </div>
            <div class="code-name">.icon-gengduo5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gengduo6"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.icon-gengduo6
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suoding3"></span>
            <div class="name">
              锁定
            </div>
            <div class="code-name">.icon-suoding3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiesuo3"></span>
            <div class="name">
              解锁
            </div>
            <div class="code-name">.icon-jiesuo3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suoding1"></span>
            <div class="name">
              242锁定
            </div>
            <div class="code-name">.icon-suoding1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiesuo1"></span>
            <div class="name">
              243解锁
            </div>
            <div class="code-name">.icon-jiesuo1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiesuo2"></span>
            <div class="name">
              解锁
            </div>
            <div class="code-name">.icon-jiesuo2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suoding2"></span>
            <div class="name">
              锁定
            </div>
            <div class="code-name">.icon-suoding2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-likefill1"></span>
            <div class="name">
              like_fill
            </div>
            <div class="code-name">.icon-likefill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-likeline1"></span>
            <div class="name">
              like
            </div>
            <div class="code-name">.icon-likeline1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-thumb-up-line2"></span>
            <div class="name">
              appreciate_light
            </div>
            <div class="code-name">.icon-thumb-up-line2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-thumb-up-fill2"></span>
            <div class="name">
              appreciate_fill_light
            </div>
            <div class="code-name">.icon-thumb-up-fill2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-likefill2"></span>
            <div class="name">
              喜欢2
            </div>
            <div class="code-name">.icon-likefill2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-likeline2"></span>
            <div class="name">
              喜欢
            </div>
            <div class="code-name">.icon-likeline2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-thumb-down-fill2"></span>
            <div class="name">
              oppose_fill_light
            </div>
            <div class="code-name">.icon-thumb-down-fill2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-thumb-down-line2"></span>
            <div class="name">
              oppose_light
            </div>
            <div class="code-name">.icon-thumb-down-line2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-thumb-up-line3"></span>
            <div class="name">
              点赞
            </div>
            <div class="code-name">.icon-thumb-up-line3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-likeline4"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.icon-likeline4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-thumb-up-fill3"></span>
            <div class="name">
              点赞
            </div>
            <div class="code-name">.icon-thumb-up-fill3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-likefill4"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.icon-likefill4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-money-finance-seller-fill"></span>
            <div class="name">
              money-finance-seller-fill
            </div>
            <div class="code-name">.icon-money-finance-seller-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-money-finance-buyer-fill"></span>
            <div class="name">
              money-finance-buyer-fill
            </div>
            <div class="code-name">.icon-money-finance-buyer-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-money-rmb"></span>
            <div class="name">
              money-rmb
            </div>
            <div class="code-name">.icon-money-rmb
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-money-rmb-fill"></span>
            <div class="name">
              money-rmb-fill
            </div>
            <div class="code-name">.icon-money-rmb-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuye"></span>
            <div class="name">
              主页
            </div>
            <div class="code-name">.icon-zhuye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuye1"></span>
            <div class="name">
              主页
            </div>
            <div class="code-name">.icon-zhuye1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuye2"></span>
            <div class="name">
              主页
            </div>
            <div class="code-name">.icon-zhuye2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-likefill3"></span>
            <div class="name">
              star-fill
            </div>
            <div class="code-name">.icon-likefill3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-likeline3"></span>
            <div class="name">
              star-line
            </div>
            <div class="code-name">.icon-likeline3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-thumb-down-fill1"></span>
            <div class="name">
              thumb-down-fill
            </div>
            <div class="code-name">.icon-thumb-down-fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-thumb-down-line1"></span>
            <div class="name">
              thumb-down-line
            </div>
            <div class="code-name">.icon-thumb-down-line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-thumb-up-fill1"></span>
            <div class="name">
              thumb-up-fill
            </div>
            <div class="code-name">.icon-thumb-up-fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-thumb-up-line1"></span>
            <div class="name">
              thumb-up-line
            </div>
            <div class="code-name">.icon-thumb-up-line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bank-fill"></span>
            <div class="name">
              bank-fill
            </div>
            <div class="code-name">.icon-bank-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bank-line"></span>
            <div class="name">
              bank-line
            </div>
            <div class="code-name">.icon-bank-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hospital-line"></span>
            <div class="name">
              hospital-line
            </div>
            <div class="code-name">.icon-hospital-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hospital-fill"></span>
            <div class="name">
              hospital-fill
            </div>
            <div class="code-name">.icon-hospital-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bar-chart--fill"></span>
            <div class="name">
              bar-chart-2-fill
            </div>
            <div class="code-name">.icon-bar-chart--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bar-chart--line"></span>
            <div class="name">
              bar-chart-2-line
            </div>
            <div class="code-name">.icon-bar-chart--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bar-chart-box-fill"></span>
            <div class="name">
              bar-chart-box-fill
            </div>
            <div class="code-name">.icon-bar-chart-box-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bar-chart-box-line"></span>
            <div class="name">
              bar-chart-box-line
            </div>
            <div class="code-name">.icon-bar-chart-box-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bar-chart-grouped-fill"></span>
            <div class="name">
              bar-chart-grouped-fill
            </div>
            <div class="code-name">.icon-bar-chart-grouped-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bar-chart-grouped-line"></span>
            <div class="name">
              bar-chart-grouped-line
            </div>
            <div class="code-name">.icon-bar-chart-grouped-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cloud-line"></span>
            <div class="name">
              cloud-line
            </div>
            <div class="code-name">.icon-cloud-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-customer-service--fill"></span>
            <div class="name">
              customer-service-2-fill
            </div>
            <div class="code-name">.icon-customer-service--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-customer-service--line"></span>
            <div class="name">
              customer-service-2-line
            </div>
            <div class="code-name">.icon-customer-service--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mail-fill"></span>
            <div class="name">
              mail-fill
            </div>
            <div class="code-name">.icon-mail-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mail-line"></span>
            <div class="name">
              mail-line
            </div>
            <div class="code-name">.icon-mail-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-printer-fill"></span>
            <div class="name">
              printer-fill
            </div>
            <div class="code-name">.icon-printer-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-printer-line"></span>
            <div class="name">
              printer-line
            </div>
            <div class="code-name">.icon-printer-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chat--fill"></span>
            <div class="name">
              chat-2-fill
            </div>
            <div class="code-name">.icon-chat--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chat--line"></span>
            <div class="name">
              chat-2-line
            </div>
            <div class="code-name">.icon-chat--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chat--fill1"></span>
            <div class="name">
              chat-3-fill
            </div>
            <div class="code-name">.icon-chat--fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chat--line1"></span>
            <div class="name">
              chat-3-line
            </div>
            <div class="code-name">.icon-chat--line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chat--fill2"></span>
            <div class="name">
              chat-4-fill
            </div>
            <div class="code-name">.icon-chat--fill2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chat--line2"></span>
            <div class="name">
              chat-4-line
            </div>
            <div class="code-name">.icon-chat--line2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-edit--fill"></span>
            <div class="name">
              edit-2-fill
            </div>
            <div class="code-name">.icon-edit--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-edit--line"></span>
            <div class="name">
              edit-2-line
            </div>
            <div class="code-name">.icon-edit--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-edit-fill"></span>
            <div class="name">
              edit-fill
            </div>
            <div class="code-name">.icon-edit-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-edit-line"></span>
            <div class="name">
              edit-line
            </div>
            <div class="code-name">.icon-edit-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-git-repository-fill"></span>
            <div class="name">
              git-repository-fill
            </div>
            <div class="code-name">.icon-git-repository-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-git-repository-line"></span>
            <div class="name">
              git-repository-line
            </div>
            <div class="code-name">.icon-git-repository-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-battery--charge-line"></span>
            <div class="name">
              battery-2-charge-line
            </div>
            <div class="code-name">.icon-battery--charge-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-battery--charge-fill"></span>
            <div class="name">
              battery-2-charge-fill
            </div>
            <div class="code-name">.icon-battery--charge-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-phone-fill"></span>
            <div class="name">
              phone-fill
            </div>
            <div class="code-name">.icon-phone-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-phone-line"></span>
            <div class="name">
              phone-line
            </div>
            <div class="code-name">.icon-phone-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-book--fill"></span>
            <div class="name">
              book-2-fill
            </div>
            <div class="code-name">.icon-book--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-book--line"></span>
            <div class="name">
              book-2-line
            </div>
            <div class="code-name">.icon-book--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-book-open-line"></span>
            <div class="name">
              book-open-line
            </div>
            <div class="code-name">.icon-book-open-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-book-open-fill"></span>
            <div class="name">
              book-open-fill
            </div>
            <div class="code-name">.icon-book-open-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file-music-fill"></span>
            <div class="name">
              file-music-fill
            </div>
            <div class="code-name">.icon-file-music-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file-music-line"></span>
            <div class="name">
              file-music-line
            </div>
            <div class="code-name">.icon-file-music-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder-music-fill"></span>
            <div class="name">
              folder-music-fill
            </div>
            <div class="code-name">.icon-folder-music-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder-music-line"></span>
            <div class="name">
              folder-music-line
            </div>
            <div class="code-name">.icon-folder-music-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder-open-line"></span>
            <div class="name">
              folder-open-line
            </div>
            <div class="code-name">.icon-folder-open-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder-open-fill"></span>
            <div class="name">
              folder-open-fill
            </div>
            <div class="code-name">.icon-folder-open-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gift--line"></span>
            <div class="name">
              gift-2-line
            </div>
            <div class="code-name">.icon-gift--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gift-fill"></span>
            <div class="name">
              gift-fill
            </div>
            <div class="code-name">.icon-gift-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gift-line"></span>
            <div class="name">
              gift-line
            </div>
            <div class="code-name">.icon-gift-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hand-heart-line"></span>
            <div class="name">
              hand-heart-line
            </div>
            <div class="code-name">.icon-hand-heart-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hand-heart-fill"></span>
            <div class="name">
              hand-heart-fill
            </div>
            <div class="code-name">.icon-hand-heart-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shopping-cart--fill"></span>
            <div class="name">
              shopping-cart-2-fill
            </div>
            <div class="code-name">.icon-shopping-cart--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shopping-cart-fill"></span>
            <div class="name">
              shopping-cart-fill
            </div>
            <div class="code-name">.icon-shopping-cart-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shopping-cart--line"></span>
            <div class="name">
              shopping-cart-2-line
            </div>
            <div class="code-name">.icon-shopping-cart--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shopping-cart-line"></span>
            <div class="name">
              shopping-cart-line
            </div>
            <div class="code-name">.icon-shopping-cart-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vip-fill"></span>
            <div class="name">
              vip-fill
            </div>
            <div class="code-name">.icon-vip-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vip-line"></span>
            <div class="name">
              vip-line
            </div>
            <div class="code-name">.icon-vip-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bus--fill"></span>
            <div class="name">
              bus-2-fill
            </div>
            <div class="code-name">.icon-bus--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bus-fill"></span>
            <div class="name">
              bus-fill
            </div>
            <div class="code-name">.icon-bus-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bus--line"></span>
            <div class="name">
              bus-2-line
            </div>
            <div class="code-name">.icon-bus--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bike-line"></span>
            <div class="name">
              bike-line
            </div>
            <div class="code-name">.icon-bike-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bus-line"></span>
            <div class="name">
              bus-line
            </div>
            <div class="code-name">.icon-bus-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bike-fill"></span>
            <div class="name">
              bike-fill
            </div>
            <div class="code-name">.icon-bike-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-e-bike--fill"></span>
            <div class="name">
              e-bike-2-fill
            </div>
            <div class="code-name">.icon-e-bike--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-e-bike--line"></span>
            <div class="name">
              e-bike-2-line
            </div>
            <div class="code-name">.icon-e-bike--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-flight-takeoff-line"></span>
            <div class="name">
              flight-takeoff-line
            </div>
            <div class="code-name">.icon-flight-takeoff-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-flight-takeoff-fill"></span>
            <div class="name">
              flight-takeoff-fill
            </div>
            <div class="code-name">.icon-flight-takeoff-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-motorbike-line"></span>
            <div class="name">
              motorbike-line
            </div>
            <div class="code-name">.icon-motorbike-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-motorbike-fill"></span>
            <div class="name">
              motorbike-fill
            </div>
            <div class="code-name">.icon-motorbike-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-parking-box-fill"></span>
            <div class="name">
              parking-box-fill
            </div>
            <div class="code-name">.icon-parking-box-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-parking-box-line"></span>
            <div class="name">
              parking-box-line
            </div>
            <div class="code-name">.icon-parking-box-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-parking-fill"></span>
            <div class="name">
              parking-fill
            </div>
            <div class="code-name">.icon-parking-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-parking-line"></span>
            <div class="name">
              parking-line
            </div>
            <div class="code-name">.icon-parking-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-plane-fill"></span>
            <div class="name">
              plane-fill
            </div>
            <div class="code-name">.icon-plane-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-plane-line"></span>
            <div class="name">
              plane-line
            </div>
            <div class="code-name">.icon-plane-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-restaurant-fill"></span>
            <div class="name">
              restaurant-fill
            </div>
            <div class="code-name">.icon-restaurant-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-restaurant--fill"></span>
            <div class="name">
              restaurant-2-fill
            </div>
            <div class="code-name">.icon-restaurant--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-restaurant--line"></span>
            <div class="name">
              restaurant-2-line
            </div>
            <div class="code-name">.icon-restaurant--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-restaurant-line"></span>
            <div class="name">
              restaurant-line
            </div>
            <div class="code-name">.icon-restaurant-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-riding-fill"></span>
            <div class="name">
              riding-fill
            </div>
            <div class="code-name">.icon-riding-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-riding-line"></span>
            <div class="name">
              riding-line
            </div>
            <div class="code-name">.icon-riding-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-run-line"></span>
            <div class="name">
              run-line
            </div>
            <div class="code-name">.icon-run-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-run-fill"></span>
            <div class="name">
              run-fill
            </div>
            <div class="code-name">.icon-run-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sailboat-fill"></span>
            <div class="name">
              sailboat-fill
            </div>
            <div class="code-name">.icon-sailboat-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sailboat-line"></span>
            <div class="name">
              sailboat-line
            </div>
            <div class="code-name">.icon-sailboat-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ship--fill"></span>
            <div class="name">
              ship-2-fill
            </div>
            <div class="code-name">.icon-ship--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ship--line"></span>
            <div class="name">
              ship-2-line
            </div>
            <div class="code-name">.icon-ship--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ship-line"></span>
            <div class="name">
              ship-line
            </div>
            <div class="code-name">.icon-ship-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ship-fill"></span>
            <div class="name">
              ship-fill
            </div>
            <div class="code-name">.icon-ship-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-walk-line"></span>
            <div class="name">
              walk-line
            </div>
            <div class="code-name">.icon-walk-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-walk-fill"></span>
            <div class="name">
              walk-fill
            </div>
            <div class="code-name">.icon-walk-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-camera--line"></span>
            <div class="name">
              camera-2-line
            </div>
            <div class="code-name">.icon-camera--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-camera-fill"></span>
            <div class="name">
              camera-fill
            </div>
            <div class="code-name">.icon-camera-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-football-line"></span>
            <div class="name">
              football-line
            </div>
            <div class="code-name">.icon-football-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-football-fill"></span>
            <div class="name">
              football-fill
            </div>
            <div class="code-name">.icon-football-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hearts-fill"></span>
            <div class="name">
              hearts-fill
            </div>
            <div class="code-name">.icon-hearts-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hearts-line"></span>
            <div class="name">
              hearts-line
            </div>
            <div class="code-name">.icon-hearts-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-t-shirt--line"></span>
            <div class="name">
              t-shirt-2-line
            </div>
            <div class="code-name">.icon-t-shirt--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-t-shirt--fill"></span>
            <div class="name">
              t-shirt-2-fill
            </div>
            <div class="code-name">.icon-t-shirt--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-umbrella-fill"></span>
            <div class="name">
              umbrella-fill
            </div>
            <div class="code-name">.icon-umbrella-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-umbrella-line"></span>
            <div class="name">
              umbrella-line
            </div>
            <div class="code-name">.icon-umbrella-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-heart--line"></span>
            <div class="name">
              heart-2-line
            </div>
            <div class="code-name">.icon-heart--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-heart-fill"></span>
            <div class="name">
              heart-fill
            </div>
            <div class="code-name">.icon-heart-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lock-line"></span>
            <div class="name">
              lock-line
            </div>
            <div class="code-name">.icon-lock-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lock-fill"></span>
            <div class="name">
              lock-fill
            </div>
            <div class="code-name">.icon-lock-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lock-unlock-fill"></span>
            <div class="name">
              lock-unlock-fill
            </div>
            <div class="code-name">.icon-lock-unlock-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lock-unlock-line"></span>
            <div class="name">
              lock-unlock-line
            </div>
            <div class="code-name">.icon-lock-unlock-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-settings--fill"></span>
            <div class="name">
              settings-3-fill
            </div>
            <div class="code-name">.icon-settings--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-settings--line"></span>
            <div class="name">
              settings-3-line
            </div>
            <div class="code-name">.icon-settings--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-settings--fill1"></span>
            <div class="name">
              settings-4-fill
            </div>
            <div class="code-name">.icon-settings--fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-settings--fill2"></span>
            <div class="name">
              settings-5-fill
            </div>
            <div class="code-name">.icon-settings--fill2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cloudy--fill"></span>
            <div class="name">
              cloudy-2-fill
            </div>
            <div class="code-name">.icon-cloudy--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cloudy--line"></span>
            <div class="name">
              cloudy-2-line
            </div>
            <div class="code-name">.icon-cloudy--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moon-clear-fill"></span>
            <div class="name">
              moon-clear-fill
            </div>
            <div class="code-name">.icon-moon-clear-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moon-clear-line"></span>
            <div class="name">
              moon-clear-line
            </div>
            <div class="code-name">.icon-moon-clear-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sun-fill"></span>
            <div class="name">
              sun-fill
            </div>
            <div class="code-name">.icon-sun-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sun-line"></span>
            <div class="name">
              sun-line
            </div>
            <div class="code-name">.icon-sun-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-temp-cold-fill"></span>
            <div class="name">
              temp-cold-fill
            </div>
            <div class="code-name">.icon-temp-cold-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-temp-cold-line"></span>
            <div class="name">
              temp-cold-line
            </div>
            <div class="code-name">.icon-temp-cold-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-temp-hot-line"></span>
            <div class="name">
              temp-hot-line
            </div>
            <div class="code-name">.icon-temp-hot-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user1"></span>
            <div class="name">
              user-3-fill
            </div>
            <div class="code-name">.icon-user1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user2"></span>
            <div class="name">
              user-3-line
            </div>
            <div class="code-name">.icon-user2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user3"></span>
            <div class="name">
              user-2-fill
            </div>
            <div class="code-name">.icon-user3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user4"></span>
            <div class="name">
              user-2-line
            </div>
            <div class="code-name">.icon-user4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user5"></span>
            <div class="name">
              user-5-fill
            </div>
            <div class="code-name">.icon-user5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user6"></span>
            <div class="name">
              user-5-line
            </div>
            <div class="code-name">.icon-user6
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user7"></span>
            <div class="name">
              user-fill
            </div>
            <div class="code-name">.icon-user7
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user8"></span>
            <div class="name">
              user-line
            </div>
            <div class="code-name">.icon-user8
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common1"></span>
            <div class="name">
              building-2-fill
            </div>
            <div class="code-name">.icon-common1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common2"></span>
            <div class="name">
              building-3-fill
            </div>
            <div class="code-name">.icon-common2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common3"></span>
            <div class="name">
              building-4-fill
            </div>
            <div class="code-name">.icon-common3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common4"></span>
            <div class="name">
              store-fill
            </div>
            <div class="code-name">.icon-common4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common5"></span>
            <div class="name">
              archive-fill
            </div>
            <div class="code-name">.icon-common5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common6"></span>
            <div class="name">
              archive-drawer-fill
            </div>
            <div class="code-name">.icon-common6
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common7"></span>
            <div class="name">
              briefcase-2-fill
            </div>
            <div class="code-name">.icon-common7
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common8"></span>
            <div class="name">
              briefcase-fill
            </div>
            <div class="code-name">.icon-common8
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common9"></span>
            <div class="name">
              mail-open-fill
            </div>
            <div class="code-name">.icon-common9
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common10"></span>
            <div class="name">
              projector-fill
            </div>
            <div class="code-name">.icon-common10
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common11"></span>
            <div class="name">
              brush-3-fill
            </div>
            <div class="code-name">.icon-common11
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common12"></span>
            <div class="name">
              crop-fill
            </div>
            <div class="code-name">.icon-common12
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common13"></span>
            <div class="name">
              drop-fill
            </div>
            <div class="code-name">.icon-common13
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common14"></span>
            <div class="name">
              focus-fill
            </div>
            <div class="code-name">.icon-common14
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common15"></span>
            <div class="name">
              grid-fill
            </div>
            <div class="code-name">.icon-common15
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common16"></span>
            <div class="name">
              layout-2-fill
            </div>
            <div class="code-name">.icon-common16
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common17"></span>
            <div class="name">
              layout-3-fill
            </div>
            <div class="code-name">.icon-common17
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common18"></span>
            <div class="name">
              layout-4-fill
            </div>
            <div class="code-name">.icon-common18
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common19"></span>
            <div class="name">
              layout-6-fill
            </div>
            <div class="code-name">.icon-common19
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common20"></span>
            <div class="name">
              layout-bottom-fill
            </div>
            <div class="code-name">.icon-common20
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common21"></span>
            <div class="name">
              layout-grid-fill
            </div>
            <div class="code-name">.icon-common21
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common22"></span>
            <div class="name">
              layout-left-2-fill
            </div>
            <div class="code-name">.icon-common22
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common23"></span>
            <div class="name">
              layout-left-fill
            </div>
            <div class="code-name">.icon-common23
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common24"></span>
            <div class="name">
              layout-right-fill
            </div>
            <div class="code-name">.icon-common24
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common25"></span>
            <div class="name">
              layout-top-2-fill
            </div>
            <div class="code-name">.icon-common25
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common26"></span>
            <div class="name">
              gradienter-fill
            </div>
            <div class="code-name">.icon-common26
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common27"></span>
            <div class="name">
              cpu-line
            </div>
            <div class="code-name">.icon-common27
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common28"></span>
            <div class="name">
              hard-drive-2-fill
            </div>
            <div class="code-name">.icon-common28
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common29"></span>
            <div class="name">
              mouse-fill
            </div>
            <div class="code-name">.icon-common29
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common30"></span>
            <div class="name">
              server-fill
            </div>
            <div class="code-name">.icon-common30
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common31"></span>
            <div class="name">
              file-mark-fill
            </div>
            <div class="code-name">.icon-common31
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common32"></span>
            <div class="name">
              folders-fill
            </div>
            <div class="code-name">.icon-common32
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common33"></span>
            <div class="name">
              passport-fill
            </div>
            <div class="code-name">.icon-common33
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common34"></span>
            <div class="name">
              copper-coin-fill
            </div>
            <div class="code-name">.icon-common34
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common35"></span>
            <div class="name">
              gift-2-fill
            </div>
            <div class="code-name">.icon-common35
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common36"></span>
            <div class="name">
              ticket-fill
            </div>
            <div class="code-name">.icon-common36
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common37"></span>
            <div class="name">
              wallet-fill
            </div>
            <div class="code-name">.icon-common37
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common38"></span>
            <div class="name">
              windows-fill
            </div>
            <div class="code-name">.icon-common38
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common39"></span>
            <div class="name">
              compass-2-fill
            </div>
            <div class="code-name">.icon-common39
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common40"></span>
            <div class="name">
              compass-4-fill
            </div>
            <div class="code-name">.icon-common40
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common41"></span>
            <div class="name">
              aspect-ratio-fill
            </div>
            <div class="code-name">.icon-common41
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common42"></span>
            <div class="name">
              voice-recognition-fill
            </div>
            <div class="code-name">.icon-common42
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common43"></span>
            <div class="name">
              apps-2-fill
            </div>
            <div class="code-name">.icon-common43
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common44"></span>
            <div class="name">
              apps-fill
            </div>
            <div class="code-name">.icon-common44
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common45"></span>
            <div class="name">
              checkbox-multiple-blank-fill
            </div>
            <div class="code-name">.icon-common45
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common46"></span>
            <div class="name">
              dashboard-fill
            </div>
            <div class="code-name">.icon-common46
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common47"></span>
            <div class="name">
              notification-badge-fill
            </div>
            <div class="code-name">.icon-common47
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common48"></span>
            <div class="name">
              qr-scan-fill
            </div>
            <div class="code-name">.icon-common48
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common49"></span>
            <div class="name">
              side-bar-fill
            </div>
            <div class="code-name">.icon-common49
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common50"></span>
            <div class="name">
              spy-fill
            </div>
            <div class="code-name">.icon-common50
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo4"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo1"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo5"></use>
                </svg>
                <div class="name">搜索类目</div>
                <div class="code-name">#icon-sousuo5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo2"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo3"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vip1"></use>
                </svg>
                <div class="name">vip - fill</div>
                <div class="code-name">#icon-vip1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vip2"></use>
                </svg>
                <div class="name">vip_icon</div>
                <div class="code-name">#icon-vip2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vip3"></use>
                </svg>
                <div class="name">会员卡</div>
                <div class="code-name">#icon-vip3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vip4"></use>
                </svg>
                <div class="name">会员</div>
                <div class="code-name">#icon-vip4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vip5"></use>
                </svg>
                <div class="name">vip</div>
                <div class="code-name">#icon-vip5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi5"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-shezhi5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi1"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-shezhi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi2"></use>
                </svg>
                <div class="name">205设置</div>
                <div class="code-name">#icon-shezhi2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi3"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-shezhi3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi4"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-shezhi4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi4"></use>
                </svg>
                <div class="name"> 消息</div>
                <div class="code-name">#icon-xiaoxi4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi1"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-xiaoxi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi2"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-xiaoxi2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi5"></use>
                </svg>
                <div class="name">消息通知</div>
                <div class="code-name">#icon-xiaoxi5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi3"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-xiaoxi3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi6"></use>
                </svg>
                <div class="name">消息,信息</div>
                <div class="code-name">#icon-xiaoxi6</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chongzhi5"></use>
                </svg>
                <div class="name">充值</div>
                <div class="code-name">#icon-chongzhi5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chongzhi1"></use>
                </svg>
                <div class="name">充值</div>
                <div class="code-name">#icon-chongzhi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chongzhi2"></use>
                </svg>
                <div class="name">充值2</div>
                <div class="code-name">#icon-chongzhi2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chongzhi3"></use>
                </svg>
                <div class="name">充值</div>
                <div class="code-name">#icon-chongzhi3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chongzhi4"></use>
                </svg>
                <div class="name">充值</div>
                <div class="code-name">#icon-chongzhi4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingdan5"></use>
                </svg>
                <div class="name">全部订单</div>
                <div class="code-name">#icon-dingdan5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingdan4"></use>
                </svg>
                <div class="name">3.1订单</div>
                <div class="code-name">#icon-dingdan4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingdan2"></use>
                </svg>
                <div class="name">订单</div>
                <div class="code-name">#icon-dingdan2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingdan3"></use>
                </svg>
                <div class="name"> 订单集合</div>
                <div class="code-name">#icon-dingdan3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingdan1"></use>
                </svg>
                <div class="name">订单</div>
                <div class="code-name">#icon-dingdan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwuche5"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#icon-gouwuche5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwuche1"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#icon-gouwuche1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwuche2"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#icon-gouwuche2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwuche3"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#icon-gouwuche3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwuche4"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#icon-gouwuche4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kefu5"></use>
                </svg>
                <div class="name">客服</div>
                <div class="code-name">#icon-kefu5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kefu1"></use>
                </svg>
                <div class="name">客服</div>
                <div class="code-name">#icon-kefu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kefu2"></use>
                </svg>
                <div class="name">客服</div>
                <div class="code-name">#icon-kefu2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kefu4"></use>
                </svg>
                <div class="name">38-客服</div>
                <div class="code-name">#icon-kefu4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kefu3"></use>
                </svg>
                <div class="name">客服</div>
                <div class="code-name">#icon-kefu3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu5"></use>
                </svg>
                <div class="name">删除2</div>
                <div class="code-name">#icon-shanchu5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu3"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-shanchu3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu1"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-shanchu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu2"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-shanchu2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu4"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-shanchu4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiugai4"></use>
                </svg>
                <div class="name">修改</div>
                <div class="code-name">#icon-xiugai4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiugai5"></use>
                </svg>
                <div class="name">修改</div>
                <div class="code-name">#icon-xiugai5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiugai1"></use>
                </svg>
                <div class="name">修改</div>
                <div class="code-name">#icon-xiugai1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiugai2"></use>
                </svg>
                <div class="name">修改</div>
                <div class="code-name">#icon-xiugai2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiugai3"></use>
                </svg>
                <div class="name">修改</div>
                <div class="code-name">#icon-xiugai3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xinzeng1"></use>
                </svg>
                <div class="name">加</div>
                <div class="code-name">#icon-xinzeng1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xinzeng3"></use>
                </svg>
                <div class="name">新增</div>
                <div class="code-name">#icon-xinzeng3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xinzeng4"></use>
                </svg>
                <div class="name">新增</div>
                <div class="code-name">#icon-xinzeng4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xinzeng5"></use>
                </svg>
                <div class="name">新增</div>
                <div class="code-name">#icon-xinzeng5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xinzeng2"></use>
                </svg>
                <div class="name">新增</div>
                <div class="code-name">#icon-xinzeng2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengduo1"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#icon-gengduo1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengduo7"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#icon-gengduo7</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengduo2"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#icon-gengduo2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengduo3"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#icon-gengduo3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengduo4"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#icon-gengduo4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengduo5"></use>
                </svg>
                <div class="name">KHCFDC_更多</div>
                <div class="code-name">#icon-gengduo5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengduo6"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#icon-gengduo6</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suoding3"></use>
                </svg>
                <div class="name">锁定</div>
                <div class="code-name">#icon-suoding3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiesuo3"></use>
                </svg>
                <div class="name">解锁</div>
                <div class="code-name">#icon-jiesuo3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suoding1"></use>
                </svg>
                <div class="name">242锁定</div>
                <div class="code-name">#icon-suoding1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiesuo1"></use>
                </svg>
                <div class="name">243解锁</div>
                <div class="code-name">#icon-jiesuo1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiesuo2"></use>
                </svg>
                <div class="name">解锁</div>
                <div class="code-name">#icon-jiesuo2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suoding2"></use>
                </svg>
                <div class="name">锁定</div>
                <div class="code-name">#icon-suoding2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-likefill1"></use>
                </svg>
                <div class="name">like_fill</div>
                <div class="code-name">#icon-likefill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-likeline1"></use>
                </svg>
                <div class="name">like</div>
                <div class="code-name">#icon-likeline1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-thumb-up-line2"></use>
                </svg>
                <div class="name">appreciate_light</div>
                <div class="code-name">#icon-thumb-up-line2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-thumb-up-fill2"></use>
                </svg>
                <div class="name">appreciate_fill_light</div>
                <div class="code-name">#icon-thumb-up-fill2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-likefill2"></use>
                </svg>
                <div class="name">喜欢2</div>
                <div class="code-name">#icon-likefill2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-likeline2"></use>
                </svg>
                <div class="name">喜欢</div>
                <div class="code-name">#icon-likeline2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-thumb-down-fill2"></use>
                </svg>
                <div class="name">oppose_fill_light</div>
                <div class="code-name">#icon-thumb-down-fill2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-thumb-down-line2"></use>
                </svg>
                <div class="name">oppose_light</div>
                <div class="code-name">#icon-thumb-down-line2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-thumb-up-line3"></use>
                </svg>
                <div class="name">点赞</div>
                <div class="code-name">#icon-thumb-up-line3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-likeline4"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#icon-likeline4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-thumb-up-fill3"></use>
                </svg>
                <div class="name">点赞</div>
                <div class="code-name">#icon-thumb-up-fill3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-likefill4"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#icon-likefill4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-money-finance-seller-fill"></use>
                </svg>
                <div class="name">money-finance-seller-fill</div>
                <div class="code-name">#icon-money-finance-seller-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-money-finance-buyer-fill"></use>
                </svg>
                <div class="name">money-finance-buyer-fill</div>
                <div class="code-name">#icon-money-finance-buyer-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-money-rmb"></use>
                </svg>
                <div class="name">money-rmb</div>
                <div class="code-name">#icon-money-rmb</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-money-rmb-fill"></use>
                </svg>
                <div class="name">money-rmb-fill</div>
                <div class="code-name">#icon-money-rmb-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuye"></use>
                </svg>
                <div class="name">主页</div>
                <div class="code-name">#icon-zhuye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuye1"></use>
                </svg>
                <div class="name">主页</div>
                <div class="code-name">#icon-zhuye1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuye2"></use>
                </svg>
                <div class="name">主页</div>
                <div class="code-name">#icon-zhuye2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-likefill3"></use>
                </svg>
                <div class="name">star-fill</div>
                <div class="code-name">#icon-likefill3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-likeline3"></use>
                </svg>
                <div class="name">star-line</div>
                <div class="code-name">#icon-likeline3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-thumb-down-fill1"></use>
                </svg>
                <div class="name">thumb-down-fill</div>
                <div class="code-name">#icon-thumb-down-fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-thumb-down-line1"></use>
                </svg>
                <div class="name">thumb-down-line</div>
                <div class="code-name">#icon-thumb-down-line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-thumb-up-fill1"></use>
                </svg>
                <div class="name">thumb-up-fill</div>
                <div class="code-name">#icon-thumb-up-fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-thumb-up-line1"></use>
                </svg>
                <div class="name">thumb-up-line</div>
                <div class="code-name">#icon-thumb-up-line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bank-fill"></use>
                </svg>
                <div class="name">bank-fill</div>
                <div class="code-name">#icon-bank-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bank-line"></use>
                </svg>
                <div class="name">bank-line</div>
                <div class="code-name">#icon-bank-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hospital-line"></use>
                </svg>
                <div class="name">hospital-line</div>
                <div class="code-name">#icon-hospital-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hospital-fill"></use>
                </svg>
                <div class="name">hospital-fill</div>
                <div class="code-name">#icon-hospital-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bar-chart--fill"></use>
                </svg>
                <div class="name">bar-chart-2-fill</div>
                <div class="code-name">#icon-bar-chart--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bar-chart--line"></use>
                </svg>
                <div class="name">bar-chart-2-line</div>
                <div class="code-name">#icon-bar-chart--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bar-chart-box-fill"></use>
                </svg>
                <div class="name">bar-chart-box-fill</div>
                <div class="code-name">#icon-bar-chart-box-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bar-chart-box-line"></use>
                </svg>
                <div class="name">bar-chart-box-line</div>
                <div class="code-name">#icon-bar-chart-box-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bar-chart-grouped-fill"></use>
                </svg>
                <div class="name">bar-chart-grouped-fill</div>
                <div class="code-name">#icon-bar-chart-grouped-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bar-chart-grouped-line"></use>
                </svg>
                <div class="name">bar-chart-grouped-line</div>
                <div class="code-name">#icon-bar-chart-grouped-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cloud-line"></use>
                </svg>
                <div class="name">cloud-line</div>
                <div class="code-name">#icon-cloud-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-customer-service--fill"></use>
                </svg>
                <div class="name">customer-service-2-fill</div>
                <div class="code-name">#icon-customer-service--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-customer-service--line"></use>
                </svg>
                <div class="name">customer-service-2-line</div>
                <div class="code-name">#icon-customer-service--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mail-fill"></use>
                </svg>
                <div class="name">mail-fill</div>
                <div class="code-name">#icon-mail-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mail-line"></use>
                </svg>
                <div class="name">mail-line</div>
                <div class="code-name">#icon-mail-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-printer-fill"></use>
                </svg>
                <div class="name">printer-fill</div>
                <div class="code-name">#icon-printer-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-printer-line"></use>
                </svg>
                <div class="name">printer-line</div>
                <div class="code-name">#icon-printer-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chat--fill"></use>
                </svg>
                <div class="name">chat-2-fill</div>
                <div class="code-name">#icon-chat--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chat--line"></use>
                </svg>
                <div class="name">chat-2-line</div>
                <div class="code-name">#icon-chat--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chat--fill1"></use>
                </svg>
                <div class="name">chat-3-fill</div>
                <div class="code-name">#icon-chat--fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chat--line1"></use>
                </svg>
                <div class="name">chat-3-line</div>
                <div class="code-name">#icon-chat--line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chat--fill2"></use>
                </svg>
                <div class="name">chat-4-fill</div>
                <div class="code-name">#icon-chat--fill2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chat--line2"></use>
                </svg>
                <div class="name">chat-4-line</div>
                <div class="code-name">#icon-chat--line2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit--fill"></use>
                </svg>
                <div class="name">edit-2-fill</div>
                <div class="code-name">#icon-edit--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit--line"></use>
                </svg>
                <div class="name">edit-2-line</div>
                <div class="code-name">#icon-edit--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit-fill"></use>
                </svg>
                <div class="name">edit-fill</div>
                <div class="code-name">#icon-edit-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit-line"></use>
                </svg>
                <div class="name">edit-line</div>
                <div class="code-name">#icon-edit-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-git-repository-fill"></use>
                </svg>
                <div class="name">git-repository-fill</div>
                <div class="code-name">#icon-git-repository-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-git-repository-line"></use>
                </svg>
                <div class="name">git-repository-line</div>
                <div class="code-name">#icon-git-repository-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-battery--charge-line"></use>
                </svg>
                <div class="name">battery-2-charge-line</div>
                <div class="code-name">#icon-battery--charge-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-battery--charge-fill"></use>
                </svg>
                <div class="name">battery-2-charge-fill</div>
                <div class="code-name">#icon-battery--charge-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-phone-fill"></use>
                </svg>
                <div class="name">phone-fill</div>
                <div class="code-name">#icon-phone-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-phone-line"></use>
                </svg>
                <div class="name">phone-line</div>
                <div class="code-name">#icon-phone-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-book--fill"></use>
                </svg>
                <div class="name">book-2-fill</div>
                <div class="code-name">#icon-book--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-book--line"></use>
                </svg>
                <div class="name">book-2-line</div>
                <div class="code-name">#icon-book--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-book-open-line"></use>
                </svg>
                <div class="name">book-open-line</div>
                <div class="code-name">#icon-book-open-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-book-open-fill"></use>
                </svg>
                <div class="name">book-open-fill</div>
                <div class="code-name">#icon-book-open-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file-music-fill"></use>
                </svg>
                <div class="name">file-music-fill</div>
                <div class="code-name">#icon-file-music-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file-music-line"></use>
                </svg>
                <div class="name">file-music-line</div>
                <div class="code-name">#icon-file-music-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder-music-fill"></use>
                </svg>
                <div class="name">folder-music-fill</div>
                <div class="code-name">#icon-folder-music-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder-music-line"></use>
                </svg>
                <div class="name">folder-music-line</div>
                <div class="code-name">#icon-folder-music-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder-open-line"></use>
                </svg>
                <div class="name">folder-open-line</div>
                <div class="code-name">#icon-folder-open-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder-open-fill"></use>
                </svg>
                <div class="name">folder-open-fill</div>
                <div class="code-name">#icon-folder-open-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gift--line"></use>
                </svg>
                <div class="name">gift-2-line</div>
                <div class="code-name">#icon-gift--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gift-fill"></use>
                </svg>
                <div class="name">gift-fill</div>
                <div class="code-name">#icon-gift-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gift-line"></use>
                </svg>
                <div class="name">gift-line</div>
                <div class="code-name">#icon-gift-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hand-heart-line"></use>
                </svg>
                <div class="name">hand-heart-line</div>
                <div class="code-name">#icon-hand-heart-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hand-heart-fill"></use>
                </svg>
                <div class="name">hand-heart-fill</div>
                <div class="code-name">#icon-hand-heart-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shopping-cart--fill"></use>
                </svg>
                <div class="name">shopping-cart-2-fill</div>
                <div class="code-name">#icon-shopping-cart--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shopping-cart-fill"></use>
                </svg>
                <div class="name">shopping-cart-fill</div>
                <div class="code-name">#icon-shopping-cart-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shopping-cart--line"></use>
                </svg>
                <div class="name">shopping-cart-2-line</div>
                <div class="code-name">#icon-shopping-cart--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shopping-cart-line"></use>
                </svg>
                <div class="name">shopping-cart-line</div>
                <div class="code-name">#icon-shopping-cart-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vip-fill"></use>
                </svg>
                <div class="name">vip-fill</div>
                <div class="code-name">#icon-vip-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vip-line"></use>
                </svg>
                <div class="name">vip-line</div>
                <div class="code-name">#icon-vip-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bus--fill"></use>
                </svg>
                <div class="name">bus-2-fill</div>
                <div class="code-name">#icon-bus--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bus-fill"></use>
                </svg>
                <div class="name">bus-fill</div>
                <div class="code-name">#icon-bus-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bus--line"></use>
                </svg>
                <div class="name">bus-2-line</div>
                <div class="code-name">#icon-bus--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bike-line"></use>
                </svg>
                <div class="name">bike-line</div>
                <div class="code-name">#icon-bike-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bus-line"></use>
                </svg>
                <div class="name">bus-line</div>
                <div class="code-name">#icon-bus-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bike-fill"></use>
                </svg>
                <div class="name">bike-fill</div>
                <div class="code-name">#icon-bike-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-e-bike--fill"></use>
                </svg>
                <div class="name">e-bike-2-fill</div>
                <div class="code-name">#icon-e-bike--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-e-bike--line"></use>
                </svg>
                <div class="name">e-bike-2-line</div>
                <div class="code-name">#icon-e-bike--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-flight-takeoff-line"></use>
                </svg>
                <div class="name">flight-takeoff-line</div>
                <div class="code-name">#icon-flight-takeoff-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-flight-takeoff-fill"></use>
                </svg>
                <div class="name">flight-takeoff-fill</div>
                <div class="code-name">#icon-flight-takeoff-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-motorbike-line"></use>
                </svg>
                <div class="name">motorbike-line</div>
                <div class="code-name">#icon-motorbike-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-motorbike-fill"></use>
                </svg>
                <div class="name">motorbike-fill</div>
                <div class="code-name">#icon-motorbike-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-parking-box-fill"></use>
                </svg>
                <div class="name">parking-box-fill</div>
                <div class="code-name">#icon-parking-box-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-parking-box-line"></use>
                </svg>
                <div class="name">parking-box-line</div>
                <div class="code-name">#icon-parking-box-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-parking-fill"></use>
                </svg>
                <div class="name">parking-fill</div>
                <div class="code-name">#icon-parking-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-parking-line"></use>
                </svg>
                <div class="name">parking-line</div>
                <div class="code-name">#icon-parking-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-plane-fill"></use>
                </svg>
                <div class="name">plane-fill</div>
                <div class="code-name">#icon-plane-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-plane-line"></use>
                </svg>
                <div class="name">plane-line</div>
                <div class="code-name">#icon-plane-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-restaurant-fill"></use>
                </svg>
                <div class="name">restaurant-fill</div>
                <div class="code-name">#icon-restaurant-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-restaurant--fill"></use>
                </svg>
                <div class="name">restaurant-2-fill</div>
                <div class="code-name">#icon-restaurant--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-restaurant--line"></use>
                </svg>
                <div class="name">restaurant-2-line</div>
                <div class="code-name">#icon-restaurant--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-restaurant-line"></use>
                </svg>
                <div class="name">restaurant-line</div>
                <div class="code-name">#icon-restaurant-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-riding-fill"></use>
                </svg>
                <div class="name">riding-fill</div>
                <div class="code-name">#icon-riding-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-riding-line"></use>
                </svg>
                <div class="name">riding-line</div>
                <div class="code-name">#icon-riding-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-run-line"></use>
                </svg>
                <div class="name">run-line</div>
                <div class="code-name">#icon-run-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-run-fill"></use>
                </svg>
                <div class="name">run-fill</div>
                <div class="code-name">#icon-run-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sailboat-fill"></use>
                </svg>
                <div class="name">sailboat-fill</div>
                <div class="code-name">#icon-sailboat-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sailboat-line"></use>
                </svg>
                <div class="name">sailboat-line</div>
                <div class="code-name">#icon-sailboat-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ship--fill"></use>
                </svg>
                <div class="name">ship-2-fill</div>
                <div class="code-name">#icon-ship--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ship--line"></use>
                </svg>
                <div class="name">ship-2-line</div>
                <div class="code-name">#icon-ship--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ship-line"></use>
                </svg>
                <div class="name">ship-line</div>
                <div class="code-name">#icon-ship-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ship-fill"></use>
                </svg>
                <div class="name">ship-fill</div>
                <div class="code-name">#icon-ship-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-walk-line"></use>
                </svg>
                <div class="name">walk-line</div>
                <div class="code-name">#icon-walk-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-walk-fill"></use>
                </svg>
                <div class="name">walk-fill</div>
                <div class="code-name">#icon-walk-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-camera--line"></use>
                </svg>
                <div class="name">camera-2-line</div>
                <div class="code-name">#icon-camera--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-camera-fill"></use>
                </svg>
                <div class="name">camera-fill</div>
                <div class="code-name">#icon-camera-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-football-line"></use>
                </svg>
                <div class="name">football-line</div>
                <div class="code-name">#icon-football-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-football-fill"></use>
                </svg>
                <div class="name">football-fill</div>
                <div class="code-name">#icon-football-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hearts-fill"></use>
                </svg>
                <div class="name">hearts-fill</div>
                <div class="code-name">#icon-hearts-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hearts-line"></use>
                </svg>
                <div class="name">hearts-line</div>
                <div class="code-name">#icon-hearts-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-t-shirt--line"></use>
                </svg>
                <div class="name">t-shirt-2-line</div>
                <div class="code-name">#icon-t-shirt--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-t-shirt--fill"></use>
                </svg>
                <div class="name">t-shirt-2-fill</div>
                <div class="code-name">#icon-t-shirt--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-umbrella-fill"></use>
                </svg>
                <div class="name">umbrella-fill</div>
                <div class="code-name">#icon-umbrella-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-umbrella-line"></use>
                </svg>
                <div class="name">umbrella-line</div>
                <div class="code-name">#icon-umbrella-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-heart--line"></use>
                </svg>
                <div class="name">heart-2-line</div>
                <div class="code-name">#icon-heart--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-heart-fill"></use>
                </svg>
                <div class="name">heart-fill</div>
                <div class="code-name">#icon-heart-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock-line"></use>
                </svg>
                <div class="name">lock-line</div>
                <div class="code-name">#icon-lock-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock-fill"></use>
                </svg>
                <div class="name">lock-fill</div>
                <div class="code-name">#icon-lock-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock-unlock-fill"></use>
                </svg>
                <div class="name">lock-unlock-fill</div>
                <div class="code-name">#icon-lock-unlock-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock-unlock-line"></use>
                </svg>
                <div class="name">lock-unlock-line</div>
                <div class="code-name">#icon-lock-unlock-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings--fill"></use>
                </svg>
                <div class="name">settings-3-fill</div>
                <div class="code-name">#icon-settings--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings--line"></use>
                </svg>
                <div class="name">settings-3-line</div>
                <div class="code-name">#icon-settings--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings--fill1"></use>
                </svg>
                <div class="name">settings-4-fill</div>
                <div class="code-name">#icon-settings--fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings--fill2"></use>
                </svg>
                <div class="name">settings-5-fill</div>
                <div class="code-name">#icon-settings--fill2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cloudy--fill"></use>
                </svg>
                <div class="name">cloudy-2-fill</div>
                <div class="code-name">#icon-cloudy--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cloudy--line"></use>
                </svg>
                <div class="name">cloudy-2-line</div>
                <div class="code-name">#icon-cloudy--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moon-clear-fill"></use>
                </svg>
                <div class="name">moon-clear-fill</div>
                <div class="code-name">#icon-moon-clear-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moon-clear-line"></use>
                </svg>
                <div class="name">moon-clear-line</div>
                <div class="code-name">#icon-moon-clear-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sun-fill"></use>
                </svg>
                <div class="name">sun-fill</div>
                <div class="code-name">#icon-sun-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sun-line"></use>
                </svg>
                <div class="name">sun-line</div>
                <div class="code-name">#icon-sun-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-temp-cold-fill"></use>
                </svg>
                <div class="name">temp-cold-fill</div>
                <div class="code-name">#icon-temp-cold-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-temp-cold-line"></use>
                </svg>
                <div class="name">temp-cold-line</div>
                <div class="code-name">#icon-temp-cold-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-temp-hot-line"></use>
                </svg>
                <div class="name">temp-hot-line</div>
                <div class="code-name">#icon-temp-hot-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user1"></use>
                </svg>
                <div class="name">user-3-fill</div>
                <div class="code-name">#icon-user1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user2"></use>
                </svg>
                <div class="name">user-3-line</div>
                <div class="code-name">#icon-user2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user3"></use>
                </svg>
                <div class="name">user-2-fill</div>
                <div class="code-name">#icon-user3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user4"></use>
                </svg>
                <div class="name">user-2-line</div>
                <div class="code-name">#icon-user4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user5"></use>
                </svg>
                <div class="name">user-5-fill</div>
                <div class="code-name">#icon-user5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user6"></use>
                </svg>
                <div class="name">user-5-line</div>
                <div class="code-name">#icon-user6</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user7"></use>
                </svg>
                <div class="name">user-fill</div>
                <div class="code-name">#icon-user7</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user8"></use>
                </svg>
                <div class="name">user-line</div>
                <div class="code-name">#icon-user8</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common1"></use>
                </svg>
                <div class="name">building-2-fill</div>
                <div class="code-name">#icon-common1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common2"></use>
                </svg>
                <div class="name">building-3-fill</div>
                <div class="code-name">#icon-common2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common3"></use>
                </svg>
                <div class="name">building-4-fill</div>
                <div class="code-name">#icon-common3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common4"></use>
                </svg>
                <div class="name">store-fill</div>
                <div class="code-name">#icon-common4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common5"></use>
                </svg>
                <div class="name">archive-fill</div>
                <div class="code-name">#icon-common5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common6"></use>
                </svg>
                <div class="name">archive-drawer-fill</div>
                <div class="code-name">#icon-common6</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common7"></use>
                </svg>
                <div class="name">briefcase-2-fill</div>
                <div class="code-name">#icon-common7</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common8"></use>
                </svg>
                <div class="name">briefcase-fill</div>
                <div class="code-name">#icon-common8</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common9"></use>
                </svg>
                <div class="name">mail-open-fill</div>
                <div class="code-name">#icon-common9</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common10"></use>
                </svg>
                <div class="name">projector-fill</div>
                <div class="code-name">#icon-common10</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common11"></use>
                </svg>
                <div class="name">brush-3-fill</div>
                <div class="code-name">#icon-common11</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common12"></use>
                </svg>
                <div class="name">crop-fill</div>
                <div class="code-name">#icon-common12</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common13"></use>
                </svg>
                <div class="name">drop-fill</div>
                <div class="code-name">#icon-common13</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common14"></use>
                </svg>
                <div class="name">focus-fill</div>
                <div class="code-name">#icon-common14</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common15"></use>
                </svg>
                <div class="name">grid-fill</div>
                <div class="code-name">#icon-common15</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common16"></use>
                </svg>
                <div class="name">layout-2-fill</div>
                <div class="code-name">#icon-common16</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common17"></use>
                </svg>
                <div class="name">layout-3-fill</div>
                <div class="code-name">#icon-common17</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common18"></use>
                </svg>
                <div class="name">layout-4-fill</div>
                <div class="code-name">#icon-common18</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common19"></use>
                </svg>
                <div class="name">layout-6-fill</div>
                <div class="code-name">#icon-common19</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common20"></use>
                </svg>
                <div class="name">layout-bottom-fill</div>
                <div class="code-name">#icon-common20</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common21"></use>
                </svg>
                <div class="name">layout-grid-fill</div>
                <div class="code-name">#icon-common21</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common22"></use>
                </svg>
                <div class="name">layout-left-2-fill</div>
                <div class="code-name">#icon-common22</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common23"></use>
                </svg>
                <div class="name">layout-left-fill</div>
                <div class="code-name">#icon-common23</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common24"></use>
                </svg>
                <div class="name">layout-right-fill</div>
                <div class="code-name">#icon-common24</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common25"></use>
                </svg>
                <div class="name">layout-top-2-fill</div>
                <div class="code-name">#icon-common25</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common26"></use>
                </svg>
                <div class="name">gradienter-fill</div>
                <div class="code-name">#icon-common26</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common27"></use>
                </svg>
                <div class="name">cpu-line</div>
                <div class="code-name">#icon-common27</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common28"></use>
                </svg>
                <div class="name">hard-drive-2-fill</div>
                <div class="code-name">#icon-common28</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common29"></use>
                </svg>
                <div class="name">mouse-fill</div>
                <div class="code-name">#icon-common29</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common30"></use>
                </svg>
                <div class="name">server-fill</div>
                <div class="code-name">#icon-common30</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common31"></use>
                </svg>
                <div class="name">file-mark-fill</div>
                <div class="code-name">#icon-common31</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common32"></use>
                </svg>
                <div class="name">folders-fill</div>
                <div class="code-name">#icon-common32</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common33"></use>
                </svg>
                <div class="name">passport-fill</div>
                <div class="code-name">#icon-common33</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common34"></use>
                </svg>
                <div class="name">copper-coin-fill</div>
                <div class="code-name">#icon-common34</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common35"></use>
                </svg>
                <div class="name">gift-2-fill</div>
                <div class="code-name">#icon-common35</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common36"></use>
                </svg>
                <div class="name">ticket-fill</div>
                <div class="code-name">#icon-common36</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common37"></use>
                </svg>
                <div class="name">wallet-fill</div>
                <div class="code-name">#icon-common37</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common38"></use>
                </svg>
                <div class="name">windows-fill</div>
                <div class="code-name">#icon-common38</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common39"></use>
                </svg>
                <div class="name">compass-2-fill</div>
                <div class="code-name">#icon-common39</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common40"></use>
                </svg>
                <div class="name">compass-4-fill</div>
                <div class="code-name">#icon-common40</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common41"></use>
                </svg>
                <div class="name">aspect-ratio-fill</div>
                <div class="code-name">#icon-common41</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common42"></use>
                </svg>
                <div class="name">voice-recognition-fill</div>
                <div class="code-name">#icon-common42</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common43"></use>
                </svg>
                <div class="name">apps-2-fill</div>
                <div class="code-name">#icon-common43</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common44"></use>
                </svg>
                <div class="name">apps-fill</div>
                <div class="code-name">#icon-common44</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common45"></use>
                </svg>
                <div class="name">checkbox-multiple-blank-fill</div>
                <div class="code-name">#icon-common45</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common46"></use>
                </svg>
                <div class="name">dashboard-fill</div>
                <div class="code-name">#icon-common46</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common47"></use>
                </svg>
                <div class="name">notification-badge-fill</div>
                <div class="code-name">#icon-common47</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common48"></use>
                </svg>
                <div class="name">qr-scan-fill</div>
                <div class="code-name">#icon-common48</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common49"></use>
                </svg>
                <div class="name">side-bar-fill</div>
                <div class="code-name">#icon-common49</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common50"></use>
                </svg>
                <div class="name">spy-fill</div>
                <div class="code-name">#icon-common50</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
